<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>基本信息</span>
        </div>
        <el-form :model="form" ref="baseInfoForm" :rules="rules" :inline="true">
            <el-row :gutter="20" style="height: 50px;">
                <el-col :span="6">
                    <el-form-item label="异动大类:" :label-width="formLabelWidth" prop="classId">
                        <el-select v-model="form.classId">
                            <el-option
                                v-for="item in options.categories"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="异动类型:" :label-width="formLabelWidth" prop="typeName">
                        <el-input v-model="form.typeName" placeholder="请输入"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="生效时间:" :label-width="formLabelWidth" prop="changeTime">
                        <el-select v-model="form.changeTime">
                            <el-option
                                v-for="item in options.changeTimeSelection"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否可申请:" :label-width="formLabelWidth" prop="usedByStudent">
                        <el-select v-model="form.usedByStudent">
                            <el-option label="是" value="1"/>
                            <el-option label="否" value="0"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="height: 50px">
                <el-col :span="6">
                    <el-form-item label="培养层次:" :label-width="formLabelWidth" prop="studentType">
                        <el-select v-model="studentCategories" multiple>
                            <el-option
                                v-for="item in options.studentCategories"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <div class="empty-box"></div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="height: 50px">
                <el-col :span="24">
                    <el-form-item label="备注:" :label-width="formLabelWidth">
                        <el-input
                            type="textarea"
                            style="width: calc(300% - 100px)"
                            v-model="form.remark"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>
<script>
import * as API from "common/src/api/studentStatus";
import { queryDic } from "common/src/api/dictionary";
export default {
    props: {
        form: {
            type: Object,
            required: true,
            default: {}
        }
    },
    data() {
        function checkIsExistTypeName(rule, value, callback) {
            if (!value) {
                return callback(new Error("输入不能为空"));
            }
            API.isExistTypeName({ name: value }).then(response => {
                let { code, data } = response;
                if (code === 200 && data) {
                    callback(new Error("名称已经存在"));
                } else {
                    callback();
                }
            });
        }
        return {
            options: {
                changeTimeSelection: [
                    { label: "立即生效", value: 1 },
                    { label: "根据异动时间生效", value: 2 }
                ],
                categories: [],
                studentCategories: []
            },
            formLabelWidth: "100px",
            rules: {
                typeName: [
                    {
                        required: true,
                        message: "请输入异动类型",
                        trigger: "blur"
                    },
                    {
                        validator: checkIsExistTypeName,
                        trigger: "blur"
                    }
                ],
                classId: [
                    {
                        required: true,
                        message: "请选择异动大类",
                        trigger: "blur"
                    }
                ],
                changeTime: [
                    {
                        required: true,
                        message: "请选择生效时间",
                        trigger: "blur"
                    }
                ],
                usedByStudent: [
                    {
                        required: true,
                        message: "请选择是否可申请",
                        trigger: "blur"
                    }
                ],
                studentType: [
                    {
                        required: true,
                        message: "请选择培养层次",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    mounted() {
        this.initOptions();
    },
    methods: {
        initOptions() {
            let params = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC"]
            };
            API.getStatusCategoriesNoPage().then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.options.categories = data.map(item => ({
                        label: item.name,
                        value: item.id + ""
                    }));
                }
            });
            queryDic(params).then(response => {
                let {
                    code,
                    data: { X_PYCC }
                } = response;
                if (code === 200) {
                    this.options.studentCategories = Object.keys(X_PYCC).map(
                        key => ({
                            label: X_PYCC[key],
                            value: key
                        })
                    );
                }
            });
        }
    },
    computed: {
        studentCategories: {
            get() {
                if (!this.form.studentType) {
                    return [];
                }
                return this.form.studentType.split(",");
            },
            set(value) {
                this.form.studentType = value.join(",");
            }
        }
    }
};
</script>
<style>
</style>
